import { DragSource } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { dndTypes } from "../../../constants";

@DragSource(dndTypes.TABLE, {
    beginDrag: props => ({ node: { ...props.data } }),
    canDrag: props => props.data.draggable
}, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    canDrag: monitor.canDrag()
}))
export default class TableItem extends React.Component {
    componentDidMount() {
        const { connectDragPreview } = this.props

        if (connectDragPreview) {
            connectDragPreview(getEmptyImage(), {
                captureDraggingState: true,
            });
        }
    }

    render() {
        const { connectDragSource, data, style, canDrag } = this.props;
        const { dbTableName, tableName } = data;

        return connectDragSource(
            <div
                style={style}
                title={data.tableName}
                className={`ds-table-item rp-ellipsis ${!canDrag ? 'ds-disabled' : ''}`}
            >
                {dbTableName || tableName}
                <p>{dbTableName ? dbTableName : ''}</p>
            </div>,
            { dropEffect: 'copy' }
        );
    }
}
